<template>
  <div>
    <!--条件筛选-->
    <TopFilter :list="topFilterList" :cols="3" @filterChange="changeHandle"></TopFilter>
    <!--操作 -->
    <button-area :style="{ paddingLeft: '80px' }"></button-area>
    <!-- 列筛选-->
    <FilterTable
      ref="table"
      columnsRef="lhmTechnologicalProcessHours"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      :columns="columns"
      :isPagination="isPagination"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="selectData"
    >
      <!--列操作-->
      <template slot="controls"> </template>
    </FilterTable>
    <FilterTable
      ref="table1"
      columnsRef="lhmTechnologicalProcessHours1"
      :fetchapi="fetchApi1"
      :datakey="'rows'"
      :params="fetchParams"
      :columns="columns1"
      :isPagination="isPagination1"
      :onColumnsChange="columns1 => (this.columns1 = columns1)"
      :onRowSelectChange="selectData1"
    >
      <!--列操作-->
      <template slot="controls"> </template>
    </FilterTable>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { getTechnologicalPorcessHours, getPorcessHoursDown } from '@/api/repair/queryStatistics/queryAccounts';
// import { getTechnological,getTechnologicals } from '@/api/repair/queryStatistics/queryAccounts';
// 流程时长统计
export default {
  name: 'LHMTechnologicalProcessHours',
  components: {},
  mixins: [dictionary],
  data() {
    return {
      topFilterList: this.createTopFilterList(),
      fetchParams: { xhrAbort: true },
      isPagination1: true,
      isPagination: true,
      // fetchApi: getTechnological,
      // fetchApi1: getTechnologicals,
      fetchApi: getTechnologicalPorcessHours,
      fetchApi1: getPorcessHoursDown,
      columns: this.createTableColumns(),
      columns1: this.createTableColumns1()
    };
  },
  mounted() {
    // this.init();
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'RANGE_DATE',
          label: '日期',
          fieldName: 'beginDate|endDate',
          rules: [{ required: true, message: '请输入日期', trigger: 'change' }]
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '时长类别',
          dataIndex: 'hours',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '平均时长',
          dataIndex: 'SC',
          sorter: true,
          filter: true,
          filterType: 'number',
          precision: 2
        },
        {
          title: '预约平均时长',
          dataIndex: 'PJSC',
          sorter: true,
          filter: true,
          filterType: 'number',
          precision: 2
        },
        {
          title: '备注',
          dataIndex: 'remars',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        }
      ];
    },
    createTableColumns1() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '委托书类别名称',
          dataIndex: 'REPAIR_TYPE_CODE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '维修时长',
          dataIndex: 'WXSC',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '终断时长',
          dataIndex: 'ZDSC',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '开单-结算时长',
          dataIndex: 'KDZJSSC',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '开单-审核时长',
          dataIndex: 'KDZSHSC',
          sorter: true,
          filter: true,
          filterType: 'number'
        }
      ];
    },
    init() {
      this.getParams();
    },
    async getParams() {
      let res1 = await getTechnologicalPorcessHours();
      console.log(res1, '流程(上)');
      this.$refs.table.EXECUTE_INSERT(res1.data.rows);
      let res = await getPorcessHoursDown();
      console.log(res, '流程(下)');
      this.$refs.table1.EXECUTE_INSERT(res.data.rows);
    },
    selectData(val) {
      this.tableData = val;
    },
    selectData1(val) {
      this.tableData1 = val;
    },
    changeHandle(val) {
      this.fetchParams.xhrAbort = true;
      val.endDate = val.endDate ? val.endDate.split(' ')[0] + ' 23:59:59' : '';
      this.fetchParams = Object.assign({}, val, {
        xhrAbort: false
      });
    }
  }
};
</script>

<style lang="less" scoped></style>
